<template>
  <div class="app">
    <div class="header">
      <Header></Header>
    </div>
    <div class="main">
      <div class="bac" >
        <img style="width: 100%;" src="../assets/rant_bac.jpg" alt="">
      </div>

      <div class="Bread" style="margin-left: 200px;margin-top: 50px">
        <Breadcrumb>
          <Breadcrumb-item href="/"><Icon type="home"></Icon>首页</Breadcrumb-item>
          <Breadcrumb-item href=""> <router-link :to="{name:'Rent'}">网车租车实型图</router-link> </Breadcrumb-item>
          <hr style="height:1px;border:none;border-top:1px solid gray;margin-right: 200px;margin-top: 10px">
        </Breadcrumb>
      </div>

      <div class="main_content" style="width: 1150px;height: 600px;margin: auto;margin-top: 25px;margin-left: 200px">
        <div style="height: 500px">
          <div class="img_content" style="height: 500px">
            <img style="width: 500px;height: 500px" src="../assets/carList/car_1.jpg" alt="">
            <div class="title_content" style="float: right">
              <span class="title" style="font-size: 40px;margin-right: 400px;font-weight: bold;color: black;">英菲尼迪</span><br><br>
              <span class="type" style="font-size: 25px">车型：SUV</span><br><br>
              <span class="car_state" style="font-size: 25px">车况：7座/2.0T</span><br><br>
              <span class="price" style="font-size: 25px">租金：按用车时长报价</span><br><br>
              <span class="paper" style="font-size: 25px">发票：提供正规发票</span><br><br>
              <span></span>
              <Button size="large" style="width: 150px;font-size: 20px" type="primary" @click="toOrder">在线预约</Button>
              <br><br><br>
              <Button size="large" style="width: 250px;font-size: 20px"  type="primary" >一键电话15973945155</Button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
    import Header from "../components/Header";
    import Footer from "../components/Footer";
    export default {
      name: "Item",
      components:{
        Header,
        Footer
      },
      methods:{
        toOrder(){
          this.$router.push('/order')
        }
      }
    }
</script>

<style scoped>
  .img_content img{
    cursor: pointer;
    transition: all 1.2s;/*图片放大过程的时间*/
  }
  .img_content img:hover{
    transform: scale(1.1);/*鼠标经过图片放大的倍数*/
  }
</style>
